@use 'sass:map';
@use '@angular/material' as mat;
@use './mat-table/table-theme' as table-theme;

@mixin removeable($foreground) {
  border: 1px dashed transparent;
  &:hover {
    border-color: mat.get-color-from-palette($foreground, divider);
  }
}

@mixin color($config-or-theme) {
  $config: mat.get-color-config($config-or-theme);
  $foreground: map.get($config, foreground);
  $background: map.get($config, background);
  $primary: map.get($config, primary);
  $warn: map.get($config, warn);

  @include table-theme.color($config-or-theme);

  .ngm-formly-expansion__panel-row.removeable {
    @include removeable($foreground);
  }

  .ngm-formly__title {
    font-size: 1em;
    margin: 5px 0;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  /* for angular formly components */
  formly-form {
    formly-wrapper-mat-form-field {
      flex: 1;
      max-width: 100%;
    }
    .mat-form-field-appearance-standard .mat-form-field-flex {
      padding-top: unset;
    }

    .pac-formly-select {
      position: relative;
      max-width: 100%;
      flex: 1;
    }
  }
  
  .mat-select-panel.ngm-formly__background-color-panel {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 0px 0px;
    grid-template-areas:
      ". . ."
      ". . ."
      ". . .";

    .mat-option {
      width: 6em;
      height: 6em;
      padding: 0;
      .mat-option-text {
        height: 100%;
      }
      .ngm-color {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 3em;
        line-height: 6em;
        text-align: center;
      }
      .ngm-color.ngm-color__null {
        border: 1px dashed mat.get-color-from-palette($foreground, divider);
      }
    }
  }
}

@mixin density($config-or-theme) {
  @include table-theme.density($config-or-theme);

  formly-field-mat-radio {
    .mat-radio-group {
      display: flex;
      flex-wrap: wrap;
      .mat-radio-button {
        margin: 6px .5rem;
      }
    }
  }

  pac-formly-field-mat-slider {
    // slider-density 官方还没实现
    @include mat.slider-density(-1);
    .mdc-slider {
      --mdc-slider-inactive-track-height: 2px;
      --mdc-slider-active-track-height: 4px;
      --mdc-slider-handle-width: 10px;
      --mdc-slider-handle-height: 10px;
      height: 24px;

      .mdc-slider__input {
        height: 24px;
      }

      .mdc-slider__thumb {
        left: -12px;
        height: 24px;
        width: 24px;
      }
    }
  }

  .pac-formly-chart-type {
    @include mat.icon-button-density((
      density: -2,
    ));
    .mat-mdc-icon-button.mat-mdc-button-base {
      --mdc-icon-button-state-layer-size: 32px;
      padding: 0;

      .mat-icon {
        @include mat.icon-density((
          density: -2,
        ));
      }
    }
  }

  pac-formly-field-mat-checkbox {
    .mat-mdc-checkbox {
      @include mat.checkbox-density(-3);
    }
    .mdc-checkbox__background {
      @apply scale-90;
    }
  }

  .ngm-formly__pb-2 {
    @apply pb-2;
  }
}

@mixin theme($theme) {
  $color: mat.get-color-config($theme);
  $density: mat.get-density-config($theme);
  $typography: mat.get-typography-config($theme);

  @if $color != null {
    @include color($color);
  }
  @if $density != null {
    @include density($density);
  }
  @if $typography != null {
    @include typography($typography);
  }
}
